<%@page import="entlty.s_xiaotu"%>
<%@page import="java.util.List"%>
<%@page import="daoImpl.XiaotuDaoImpl"%>
<%@page import="dao.XiaotuDao"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<head>
    <base href="<%=basePath%>">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<link rel="shortcut icon" href="img/gomai/icon.ico"/>
<link rel="stylesheet" type="text/css" href="css/gomai.css"/>
	<style type="text/css">
			*{
				margin: 0px;
				padding: 0px;
			}
			.rr{
			position: relative;
			
			}
			.rr img{
				width: 76px;
				height: 60px;
				border: 1px solid rgba(191,191,191);
				
			}
			.rr img:hover{
				border: 1px solid #FF3600;
			}
			.rr ul{
			position:relative;
			right:200px;
			margin-top:390px;
			padding-left:5px;
				float: left;
			}
			.rr iframe{
			position:relative;
			left:200px;
			width:350px;
			height:350px;
			overflow:hidden;
				margin-left: 40px;
				border: 0px solid black;
				float: left;
			}
			.rr ul li{
				margin-top: 10px;
				list-style: none;
				
			}
	
		</style>
<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
		
		<script type="text/javascript">
			function jia(){
				var num=parseInt(document.getElementById("num").innerHTML)
				var nums=num+1;
				document.getElementById("num").innerHTML=nums;
			}
			function jian(){
				var num=parseInt(document.getElementById("num").innerHTML)
				var nums=num-1;
				if(nums<1){
					alert("不能再减了，再减就没有啦！")
					nums++;
				}
				document.getElementById("num").innerHTML=nums;
			}
			function overLi(){
			    var l = document.getElementById("p2");
			    var i= document.getElementById("nl2")
			    i.style.height="3770px";
			    l.style.color="red";
			    
			}
			function outLi(){
			    var l = document.getElementById("p3");
			    l.style.color="#666666";
			}
			function aa(){
			    var l = document.getElementById("p3");
			     var i= document.getElementById("nl2")
			    i.style.height="2650px";
			   	l.style.color="red";
			}
			function bb(){
			    var l = document.getElementById("p2");
			    l.style.color="#666666";
			}
			function pp(){
			    var l = document.getElementById("xq");
			    var i= document.getElementById("nl2")
			    i.style.height="3770px";
			    l.style.color="red";
			    
			}
			function po(){
			    var l = document.getElementById("pl");
			    l.style.color="#666666";
			}
			function oo(){
			    var l = document.getElementById("pl");
			     var i= document.getElementById("nl2")
			    i.style.height="2650px";
			   	l.style.color="red";
			}
			function op(){
			    var l = document.getElementById("xq");
			    l.style.color="#666666";
			}
			window.onscroll=function(){ 
			    var t=document.documentElement.scrollTop||document.body.scrollTop;  
			    var div2=document.getElementById("fixPara"); 
			    if(t>= 870){ 
			        div2.className = "div2_1";
			    }else{
			        div2.className = "div8";
			    } 
			}
			function gwc(){
				var l=document.getElementById("tk");
				l.style.display="block";
				var i=document.getElementById("fade");
				i.style.display="block";
				var o=document.getElementById("hei");
				if(o.height>5000){
					i.className=""
				}else{
					i.className="tk1"
				}
				
			}
			function gb(){
				var l=document.getElementById("tk");
				l.style.display="none";
				var i=document.getElementById("fade");
				i.style.display="none";
			}
		</script>
</head>

<body>

		<%

			XiaotuDao xdao=new XiaotuDaoImpl();
			List<s_xiaotu> li=xdao.getxt();
		%>
	<div class="div" id="hei">
			<header>
				<div class="yetou">
					<iframe src="Dengluhou.jsp" width="1537px" height="220px" scrolling="no" frameborder="0px"></iframe>
				</div>
			</header>
			<section>
				<div class="rr">
			<iframe src="${ss.s_pic }" name="cs" width="482px"scrolling="no"  height="482px"></iframe>
				
					<%for(s_xiaotu x:li){ %>
			<ul>
				
				<li><a href="<%=x.getX_pic()  %>" target="cs"><img src="<%=x.getX_pic() %>" /></a></li>
			
			</ul>
			<%} %>
				</div>
			
				<div class="s2d">
				
			
					<div class="s2">
						<h2 class="h21">${ss.sname }</h2>
						<p class="p1">${ss.jieshao }</p>
						<div class="div1"></div>
						<p><span class="span1">市场价</span><span class="span2">￥${ss.prices }</span></p>
						<p><span class="span1">醉品价</span><span class="span3">￥ ${ss.prices }</span></p>
						<p><span class="span1">促销</span><span class="span4">包邮</span><span class="span5">全场在线支付满59元免运费</span></p>
						<p><span class="span6">直降</span><span class="span5">已优惠0.00元</span></p>
						<div class="div2"></div>
						<p><span class="span7">品牌</span><span class="span8">宝泽</span><span class="span9">净含量</span><span class="span11">150克</span><span class="span10">商品编号</span><span class="span11">8666443</span></p>
						<div class="div1"></div>
						
						<form class="form1" id="yform" action="醉品茶城.html" method="post">
							<span class="span1">数量</span>
							<div class="p4">
								<input class="input" type="button" name="aa" onclick="jia()" value="+" />
								<p class="div3" id="num">1</p>
								<input class="input" type="button" name="bb" onclick="jian()" value="-" />
							</div>
						</form>
						<div class="div4" onclick="gwc()">
							<a href="Gwc?id=${ss.s_id }">加入购物车</a>
						</div>
						
						<div class="div5"></div>
						<div class="div1"></div>
						<div><span class="span12">服务</span><span class="span13">90天商品保价</span><span class="span13">30天无理由退货</span><span class="span13">10分钟极速退款</span></div>
					
					</div>
			
				</div>
				<hr class="hr1" />
				<div>
					<ul class="ul1">
						<li>|</li>
						<li>
							<a href="内联式框架2.html" onclick="outLi();overLi()" target="nl" id="p2">详情描述</a>
						</li>

						<li>|</li>
						<li>
							<a href="内联式框架2-1.html" onclick="aa();bb()" target="nl" id="p3">评论晒图(2456)</a>
						</li>
						<li>|</li>
					</ul>
				</div>
				<div class="div8" id="fixPara">
					<div class="div9">
						<p><img src="img/gomai/1_966.jpg" height="50px"/></p>
						<p class="d1">宝泽台湾乌龙茶 杉林...</p>
						<p class="d2">￥<span class="d3">330.00</span></p>
					</div>
					<ul class="ul2">
						<li>|</li>
						<li>
							<a href="内联式框架2.html" onclick="pp();po()" target="nl" id="xq">详情描述</a>
						</li>

						<li>|</li>
						<li>
							<a href="内联式框架2-1.html" onclick="oo();op()" target="nl" id="pl">评论晒图(2456)</a>
						</li>
						<li>|</li>
					</ul>
					<div class="d4" onclick="gwc()">
							加入购物车
					</div>
				</div>
			</section>
			<div class="div6">
				<div class="div7">
					<iframe src="内联式框架2.html" height="3770px" id="nl2" name="nl" class="iframe" width="1226px" scrolling="no" frameborder="0px"></iframe>
				</div>
			</div>
				<div class="yewei">
					<iframe src="YeWei.jsp" class="iframe2" height="420px" scrolling="no" frameborder="0px"></iframe>
					
				</div>
		</div>
		<div id="tk" class="tk">
			<p class="pp1"><span onclick="gb()">X</span></p>
			<p class="pp2"><img src="img/gomai/success.jpg"/></p>
			<p class="pp3">已成功加入购物车</p>
			<div class="div11" onclick="gb()"><p>继续购物</p></div>
			<div class="div22"><p><a href="Gwc?id=${ss.l_id }">去购物车结算</a></p></div>
		</div>
		<div id="fade" class="black_overlay"></div>
		<div class="dingwei">
			<ul>
				<li>
					客服
					<div>
					<img src="img/首页/客服隐藏.png" width="130px"/>
					</div>
				</li>
				<li>热线
				<div>
					<img src="img/首页/热线隐藏.png" width="130px"/>
				</div>
				</li>
				<li>服务号
				<div>
					<img src="img/页头/二维码.png" width="130px"/>
				</div>
				</li>
				<a href="#"><li>顶部</li></a>
			</ul>
		</div>
</body>
</html>